<template>

<div class="list">
    <table width="100%"  id="courseInfoTable" >
        <tr>
            <th v-for="(item,num) in lessonManagementTitle" :key="num">{{item}}</th>
           
        </tr>
        <tr align="center" v-for="i in 8" :key="i">
            <td>2022/04/20</td>
            <td>考勤系统</td>
            <td>张老师</td>
            <td>王老师</td>
            <td> 13:00:00</td>
            <td>15:00:00</td>
            <td>7605</td>
            <td>请带电脑</td>
            <td class="last-td">
                <a href="#">学员明细</a>
                <a href="#">编辑</a>
                <a href="#">删除</a>
                <a href="#">复制</a>
                </td>
        </tr>

    
    
    </table>
</div>

</template>

<script >
import { computed, reactive, ref } from 'vue'

    export default{
        name:'',
        setup(){
            
            const lessonManagementTitle=reactive(['日期','项目名称','实训老师','责任老师','签到时间','签退时间','教室','备注','操作'])
            // console.log(t);
            let lessonManagementList =reactive([
                {id:1,projectName:''}
            ])

            return{
                // blockMargin,
                lessonManagementTitle,
                lessonManagementList
            }
        }
    }
</script>

<style lang="less" scoped>
*{
margin: 0;
padding: 0;
    .list{
        width: 1200px;
        margin: auto;
        margin-top: 20px;
        // border: 1px #999 solid;
        #courseInfoTable{
            border-collapse: collapse;
            tr{
               
                td,th{
                    width: 140px;
                    height: 50px;
                }
                .last-td{
                    width: 240px;
                    a{
                        margin-right: 5px;
                    }
                }
            }
            tr:nth-child(2n-1) {
                background-color: #c2dae2;
            }
            
            tr:hover {
                background-color: rgb(214, 209, 209);
            }
        }
    }
}
</style>